<template>
  <div class="login">
    <div class="login-container">
      <div class="login-container-title">
        <h1 class="login-container-hello">进入到您的账户</h1>
       
      </div>
      <el-form
        :model="form"
        :rules="rules"
        ref="form"
        label-width="0"
        size="normal"
        class="demo-ruleForm login-container-form"
      >
        <el-form-item prop="userName">
          <el-input
            v-model.trim="form.userName"
            suffix-icon="el-icon-user"
            :maxlength="11"
            placeholder="请输入手机号"
          ></el-input>
        </el-form-item>
        <el-form-item prop="passWord">
          <el-input
            v-model.trim="form.passWord"
            suffix-icon="el-icon-goods"
            show-password
            :maxlength="20"
            placeholder="请输入密码"
          ></el-input>
        </el-form-item>
        <el-form-item prop="code">
          <el-input
            v-model.trim="form.code"
            :maxlength="4"
            placeholder="请输入验证码"
            class="login-container-form-code"
            @keyup.enter.native="submit('form')"
          ></el-input>
          <img :src="src" class="login-container-form-img" @click="newCode" />
        </el-form-item>
        <el-form-item>
          <el-button
            class="login-container-form-btn"
            type="primary"
            @click="submit('form')"
            >立即登录</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { isPhone, isPassword } from '@u/validate'
import Base64 from 'base-64'
export default {
  data() {
    return {
      randomKey: '',
      src: '',
      form: {},
      rules: {
        userName: [
          {
            trigger: 'blur',
            validator: (rule, value, callback) => {
              if (!value) {
                callback(new Error('请输入手机号'))
              } else {
                if (isPhone(value)) {
                  callback()
                } else {
                  callback(new Error('请输入正确的用户名'))
                }
              }
            },
          },
        ],
        passWord: [
          {
            trigger: 'blur',
            validator: (rule, value, callback) => {
              if (!value || !isPassword(value)) {
                callback(new Error('请输入密码（不能小于6位）'))
              } else {
                callback()
              }
            },
          },
        ],
        code: [
          {
            trigger: 'blur',
            validator: (rule, value, callback) => {
              if (!value) {
                callback(new Error('请输入验证码'))
              } else {
                callback()
              }
            },
          },
        ],
      },
    }
  },
  created() {
    sessionStorage.clear()
    this.newCode()
  },
  methods: {
    submit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const form = {
            userName: Base64.encode(this.$crypto.encrypt(this.form.userName)),
            passWord: Base64.encode(this.$crypto.encrypt(this.form.passWord)),
            code: Base64.encode(this.$crypto.encrypt(this.form.code)),
            userType: Base64.encode(this.$crypto.encrypt(1)),
            randomKey: Base64.encode(this.$crypto.encrypt(this.randomKey)),
          }
          this.$axios.post('/admin/login/login', form).then((data) => {
            if (data.code == 200) {
              sessionStorage.userInfo = JSON.stringify(data.data)
              const token = this.$crypto.decrypt(Base64.decode(data.data.token))
              const url = data.data.cookieDomain
                ? data.data.cookieDomain
                : window.location.hostname
              this.$cookies.set('mid_token', token, 'max-age=-1', null, url)
              this.$router.push('/layout')
            } else {
              this.newCode()
              this.$message.error(data.msg)
            }
          })
        } else {
          return false
        }
      })
    },
    newCode() {
      // 获取图片验证码
      let ran = this.randomString(10)
      this.randomKey = new Date().getTime() + ran
      const url = process.env.NODE_ENV == 'production' ? '/api-inner/mid' : ''
      this.src = `${this.$baseUrl + url}/admin/login/random?randomKey=${
        this.randomKey
      }`
    },
    randomString(len) {
      len = len || 40
      var $chars =
        'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz20230520' /****默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/
      var maxPos = $chars.length
      var pwd = ''
      for (let i = 0; i < len; i++) {
        pwd += $chars.charAt(Math.floor(Math.random() * maxPos))
      }
      return pwd
    },
    jump(type) {
      switch (type) {
        case 'account':
          this.$router.push('/account')
          break
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.login {
  width: 100vw;
  height: 100vh;
  background: url('~@/assets/images/login_background.png');
  background-size: 100% 100%;
  position: relative;
  &-container {
    width: 17vw;
    height: 325px;
    position: absolute;
    top: calc((100vh - 325px) / 2);
    right: 22.3vw;
    &-title {
      padding-bottom: 60px;
      em {
        margin-top: 12px;
        float: right;
        font-size: 12px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #9f9f9f;
        height: 12px;
        line-height: 12px;
        cursor: pointer;
      }
    }
    &-hello {
      font-size: 24px;
      color: #4b4f57;
      display: inline-block;
      position: relative;
    }
    &-hello::after {
      content: '';
      position: absolute;
      left: 0;
      bottom: -12px;
      width: 60px;
      height: 7px;
      background: #16ca6d;
    }
    &-form {
      display: block;
      margin: 0 auto;
      &-code {
        position: relative;
      }
      &-img {
        position: absolute;
        width: 110px;
        height: 36px;
        top: 50%;
        transform: translate(0, -50%);
        right: 2px;
        vertical-align: middle;
        cursor: pointer;
      }
      &-btn {
        width: 100%;
        height: 44px;
        margin-top: 10px;
        background: #16ca6d;
        border-radius: 6px;
        border: 0px;
      }
    }
    &-link {
      display: block;
      height: 40px;
      line-height: 40px;
      margin: 30px auto;
      text-align: center;
      li {
        display: inline-block;
        font-size: 12px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #9f9f9f;
        padding: 0 10px;
        height: 12px;
        line-height: 12px;
        cursor: pointer;
      }
    }
  }
}
</style>
